<!--文字编辑框-->
<template>
  <el-input
    class="ag-grid-edit__input"
    :ref="params.column.colDef.field + '_' + params.rowIndex"
    v-model="value"
    clearable
    :type="inputProp.type"
    :placeholder="inputProp.placeholder"
    @keydown.native="handleKeydown"
    @change="handleInput"
  >
    <span
      v-if="inputProp.appendIcon"
      slot="append"
      class="ag-grid-edit__input__append"
      @click="appendClick"
    >
      <i :class="inputProp.appendIcon"></i>
    </span>
  </el-input>
</template>
<script>
import Vue from "vue";
import { Input } from "element-ui";
Vue.use(Input);

const defaultProp = {
  type: "text",
  placeholder: "",
  rules: [],
};

export default Vue.extend({
  name: "InputEditor",
  data() {
    return {
      value: "",
      inputProp: Object.assign({}, defaultProp),
    };
  },
  beforeMount() {
    this.inputProp = Object.assign(
      {},
      defaultProp,
      this.params.column.colDef.cellEditorParams || {}
    );
    this.value = this.params.data[this.params.column.colDef.field] || "";
  },
  mounted() {
    setTimeout(() => {
      this.$refs[
        this.params.column.colDef.field + "_" + this.params.rowIndex
      ] &&
        this.$refs[
          this.params.column.colDef.field + "_" + this.params.rowIndex
        ].focus();
    }, 0);
  },
  methods: {
    handleInput() {
      this.params.api.stopEditing();
    },
    handleKeydown(event) {
      let KEY_LEFT = 37,
        KEY_UP = 38,
        KEY_RIGHT = 39,
        KEY_DOWN = 40,
        KEY_PAGE_UP = 33,
        KEY_PAGE_DOWN = 34,
        KEY_PAGE_HOME = 36,
        KEY_PAGE_END = 35,
        KEY_ENTER = 13,
        KEY_TAB = 9;

      let keyCode = event.keyCode;

      // let isNavigationKey = keyCode===KEY_LEFT || keyCode===KEY_RIGHT || keyCode===KEY_UP
      // || keyCode===KEY_DOWN || keyCode===KEY_PAGE_DOWN || keyCode===KEY_PAGE_UP
      // || keyCode===KEY_PAGE_HOME || keyCode===KEY_PAGE_END;

      // if (isNavigationKey) {
      //     event.stopPropagation();
      // }

      // 光标跳转
      if (keyCode === KEY_TAB || keyCode === KEY_ENTER) {
        this.params.api.tabToNextCell();
        // let { rowIndex, column, floating } = this.params.api.getFocusedCell();
        // let colKey = column.colId;
        // this.tabToNext({ rowIndex, colKey, floating });
        // event.stopPropagation();
      }
    },
    tabToNext({ rowIndex, colKey, floating }) {
      let columnDefs = this.params.columnApi.getAllColumns();
      let rowTotal = this.params.api.getLastDisplayedRow();
      let rowPinned = this.params.column.colDef.pinned;
      let tabindex = this.params.tabindex || -1;
      let sameLineFlag = false;

      tabindex = tabindex + 1;
      console.log(columnDefs);
      for (let i = 0; i < columnDefs.length; i++) {
        let tmpColDef = columnDefs[i].colDef;
        if (
          tmpColDef.cellEditorParams &&
          tmpColDef.cellEditorParams.tabindex === tabindex
        ) {
          sameLineFlag = true;
          colKey = columnDefs[i].colId;
          rowPinned = tmpColDef.pinned;
          break;
        }
      }
      if (!sameLineFlag) {
        rowIndex++;
        tabindex = 1;
        let tmpCol = columnDefs.filter(
          (obj) =>
            obj.colDef &&
            obj.colDef.cellEditorParams &&
            obj.colDef.cellEditorParams.tabindex === 1
        )[0];
        colKey = tmpCol.colId;
        rowPinned = tmpCol.colDef && tmpCol.colDef.pinned;
      }
      if (rowIndex <= rowTotal) {
        this.params.api.setFocusedCell(rowIndex, colKey);
        this.params.api.startEditingCell({
          rowIndex: rowIndex,
          colKey: colKey,
          rowPinned: rowPinned,
        });
      }
    },
    isPopup() {
      return this.inputProp.type === "textarea";
    },
    appendClick() {
      if (_.isFunction(this.inputProp.appendClick)) {
        this.inputProp.appendClick(
          this.params.node.data,
          this.params.rowIndex,
          this.params
        );
      }
    },
    handelDataDeal() {
      if (this._.isFunction(this.inputProp.dataDeal)) {
        this.params.data[this.params.column.colDef.field] = this.value;
        let res = this.inputProp.dataDeal(
          this.value,
          this.params.data,
          this.params
        );
      }
    },
    getValue() {
      return this.value;
    },
  },
});
</script>
